<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1></h1>
    <hr>
   <p>我是 第 1 line</p>
    <p>我是 第 2 line</p>
    <p>我是 第 3 line</p>
    <p>我是 第 4 line</p>
    <p>我是 第 5 line</p>
    <p>我是 第 6 line</p>
    <p>我是 第 7 line</p>
    <p>我是 第 8 line</p>
    <p>我是 第 9 line</p>
    <p>我是 第 10 line</p>
    <p>我是 第 11 line</p>
    <p>我是 第 12 line</p>
    <p>我是 第 13 line</p>
    <p>我是 第 14 line</p>
    <p>我是 第 15 line</p>
    <p>我是 第 16 line</p>
    <p>我是 第 17 line</p>
    <p>我是 第 18 line</p>
    <p>我是 第 19 line</p>
    <p>我是 第 20 line</p>
    <p>我是 第 21 line</p>
    <p>我是 第 22 line</p>
    <p>我是 第 23 line</p>
    <p>我是 第 24 line</p>
    <p>我是 第 25 line</p>
    <p>我是 第 26 line</p>
    <p>我是 第 27 line</p>
    <p>我是 第 28 line</p>
    <p>我是 第 29 line</p>
    <p>我是 第 30 line</p>
    <p>我是 第 31 line</p>
    <p>我是 第 32 line</p>
    <p>我是 第 33 line</p>
    <p>我是 第 34 line</p>
    <p>我是 第 35 line</p>
    <p>我是 第 36 line</p>
    <p>我是 第 37 line</p>
    <p>我是 第 38 line</p>
    <p>我是 第 39 line</p>
    <p>我是 第 40 line</p>
    <p>我是 第 41 line</p>
    <p>我是 第 42 line</p>
    <p>我是 第 43 line</p>
    <p>我是 第 44 line</p>
    <p>我是 第 45 line</p>
    <p>我是 第 46 line</p>
    <p>我是 第 47 line</p>
    <p>我是 第 48 line</p>
    <p>我是 第 49 line</p>
    <p>我是 第 50 line</p>
    <p>我是 第 51 line</p>
    <p>我是 第 52 line</p>
    <p>我是 第 53 line</p>
    <p>我是 第 54 line</p>
    <p>我是 第 55 line</p>
    <p>我是 第 56 line</p>
    <p>我是 第 57 line</p>
    <p>我是 第 58 line</p>
    <p>我是 第 59 line</p>
    <p>我是 第 60 line</p>
    <p>我是 第 61 line</p>
    <p>我是 第 62 line</p>
    <p>我是 第 63 line</p>
    <p>我是 第 64 line</p>
    <p>我是 第 65 line</p>
    <p>我是 第 66 line</p>
    <p>我是 第 67 line</p>
    <p>我是 第 68 line</p>
    <p>我是 第 69 line</p>
    <p>我是 第 70 line</p>
    <p>我是 第 71 line</p>
    <p>我是 第 72 line</p>
    <p>我是 第 73 line</p>
    <p>我是 第 74 line</p>
    <p>我是 第 75 line</p>
    <p>我是 第 76 line</p>
    <p>我是 第 77 line</p>
    <p>我是 第 78 line</p>
    <p>我是 第 79 line</p>
    <p>我是 第 80 line</p>
    <p>我是 第 81 line</p>
    <p>我是 第 82 line</p>
    <p>我是 第 83 line</p>
    <p>我是 第 84 line</p>
    <p>我是 第 85 line</p>
    <p>我是 第 86 line</p>
    <p>我是 第 87 line</p>
    <p>我是 第 88 line</p>
    <p>我是 第 89 line</p>
    <p>我是 第 90 line</p>
    <p>我是 第 91 line</p>
    <p>我是 第 92 line</p>
    <p>我是 第 93 line</p>
    <p>我是 第 94 line</p>
    <p>我是 第 95 line</p>
    <p>我是 第 96 line</p>
    <p>我是 第 97 line</p>
    <p>我是 第 98 line</p>
    <p>我是 第 99 line</p>
    <p>我是 第 100 line</p> 

 <button onclick="window.scrollTo(0,0)">TOP</button>
    <!-- <button onclick="window.scrollBy(0, -500)">回滚500</button> -->
    <button onclick="gotoTop()">回顶部</button>

    <script>

    // scrollTo()   滚到哪去
    // scrollBy()   滚过少
    
    function gotoTop(){
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        window.scrollBy(0, -100);
        if (top <= 0) {
            return;
        }
        setTimeout(gotoTop, 10);
    }
    </script>

</body>
</html>